<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 Router + Guard</title>

  <style>
    .link {
      display: inline-block;
      width: 88px;
      height: 30px;
      line-height: 30px;
      /* padding: 5px 15px; works except border and bold font */

      margin-top: 5px;
      margin-left: 10px;
      text-align: center;
    }

    .router-link-active {
      font-weight: bold;
      color: orange;
      background-color: #205081;
      border-radius: 2px;
    }

    .router-link-active:hover {
      background-color: #3b73af;
    }

    .router-link-exact-active {
      color: whitesmoke;
    }

    .link:hover {
      border-radius: 3px;
      /* border: 1px solid burlywood; */
      background-color: #3b73af;
      color: white;
    }

    .refresh {
      margin-left: 40px;
    }
  </style>

</head>
<body>
  <div id="app">
    <h2>Vue3 Router + Guard - msg: ({{msg}})</h2>
    <button @click="userId">Update ID</button>
    <span>&nbsp;&nbsp;id = {{id}} -- 当前页面是Profile时，刷新ID后继续点击Profile，则会触发beforeRouteUpdate事件</span>
    <br>
    <p>
      <router-link class="link" to="/home">Home</router-link>
      <router-link class="link" to="/about">About</router-link>
      <router-link class="link" :to=`/user/${id}`>Profile</router-link>
      <a class="link refresh" href="/route/route.html">Refresh</a>
    </p>
    <router-view></router-view>
  </div>

  <script type="text/javascript" src="../_jsvue3/vue.prod.js"></script>
  <script type="text/javascript" src="../_jsvue3/vue-router.global.prod.js"></script>
  <script type="module">

    const Home = {
      template: '<h3>Home Page</h3>',
      beforeRouteEnter(to, from) {
        console.log('+++ beforeRouterEnter 组件内守卫', '-- Home')
      },
      beforeRouteLeave(to, from) {
        console.log('+++ beforeRouteLeave 组件内守卫', '-- Home')
      },
      beforeRouteUpdate(to, from) {
        console.log('+++ beforeRouteUpdate 组件内守卫', '-- Home')
      }
    }
    const About = {template: '<h3>About Page</h3>'}
    const Profile = {
      template: '<h3>User Settings</h3>',
      beforeRouteEnter(to, from) {
        console.log('+++ beforeRouterEnter 组件内守卫', '-- Profile')
      },
      beforeRouteLeave(to, from) {
        console.log('+++ beforeRouteLeave 组件内守卫', '-- Profile')
      },
      beforeRouteUpdate(to, from) {
        console.log('+++ beforeRouteUpdate 组件内守卫', '-- Profile')
      }
    }

    const routes = [
      {path: '/', redirect: '/home'},
      {path: '/home', meta: {title: 'Home Page'}, component: Home},
      {path: '/about', meta: {title: 'About Page'}, component: About},
      { path: '/user/:id',
        meta: {title: 'User Settings Page'},
        component: Profile,
        beforeEnter: (to, from) => {
          console.log('@@@ beforeEnter -- 路由独享的守卫')
        },
      },
    ]

    const router = VueRouter.createRouter({
      history: VueRouter.createWebHistory(),
      routes
    })

    // router.beforeEach((to, from, next)=> {
    //   console.log('***beforeEach 全局守卫')
    //   next()
    // })
    router.beforeEach((to, from)=> {
      console.log('*** beforeEach 全局守卫')
      return true
    })

    router.beforeResolve((to) => {
      console.log('*** beforeResolve 全局守卫')
    })

    router.afterEach((to, from) => {
      console.log('*** afterEach 全局守卫')
      document.title = to.meta.title
    })

    let myApp = {
      setup() {
        let msg = Vue.ref('路由导航守卫测试')
        let id = Vue.ref(0)

        function userId (){
          id.value = Math.ceil(Math.random() * 100)
          console.log('get userId', id.value, id)
          return id.value
        }

        userId() //generate a new id

        return {msg, id, userId}
      }
    }

    const app = Vue.createApp(myApp)
    app.use(router)
    app.mount('#app')
  </script>

</body>
</html>